<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <style>
        .summary-table { font-size: 0.9rem; }
        .form-section {
            margin-bottom: 2rem;
            padding: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
        .customer-item {
            margin-bottom: 1rem;
            padding: 0.5rem;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
        .image-preview {
            max-width: 100%;
            max-height: 200px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mt-3">{{title}}</h1>
        <p>{{excerpt}}</p>
        <p>{{description}}</p>

        <!-- 月份选择器 -->
        <div class="mb-3">
            <form id="monthForm" method="GET" action="/apps/crm/regional-reviews">
                <div class="input-group">
                    <input type="month" class="form-control" id="month" name="month" value="{{month}}">
                    <button class="btn btn-primary" type="submit">查看</button>
                </div>
            </form>
        </div>

        <!-- 汇总数据表 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>{{month}}月复盘数据汇总</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered summary-table">
                        <thead>
                            <tr>
                                <th>用户</th>
                                <th>代表</th>
                                <th>复盘次数</th>
                                <th>新客户联系</th>
                                <th>老客户联系</th>
                                <th>线上订单</th>
                                <th>线下销售额</th>
                                <th>发布内容数</th>
                                <th>自媒体粉丝</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each summaries}}
                            <tr>
                                <td>{{this.userName}}</td>
                                <td>{{this.repCode}}</td>
                                <td>{{this.reviewCount}}</td>
                                <td>{{this.newCustomerContacts}}</td>
                                <td>{{this.existingCustomerContacts}}</td>
                                <td>{{this.onlineOrders}}</td>
                                <td>{{this.offlineSales}}</td>
                                <td>{{this.mediaContents}}</td>
                                <td>{{this.mediaFollowers}}</td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 复盘数据录入表单 -->
        <div class="card">
            <div class="card-header">
                <h5>{{yesterday}} 复盘数据录入</h5>
            </div>
            <div class="card-body">
                {{#if hasSubmittedYesterday}}
                <div class="alert alert-info">
                    您已提交昨日复盘数据。您可以继续编辑。
                </div>
                {{/if}}

                <form id="reviewForm">
                    <input type="hidden" id="reviewDate" name="reviewDate" value="{{yesterday}}">

                    <!-- 1. 客户拓新及联系 -->
                    <div class="form-section">
                        <h5>1. 客户拓新及联系</h5>

                        <!-- 1.1 昨日拓新活动 -->
                        <div class="mb-3">
                            <h6>1.1 昨日拓新（未注册）活动</h6>
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="newCustomerCount" class="form-label">联系人数</label>
                                    <input type="number" class="form-control" id="newCustomerCount" name="newCustomers.contactCount" min="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">联系方式</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="newCustomers.contactType" id="newCustomerOnline" value="online">
                                        <label class="form-check-label" for="newCustomerOnline">线上</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="newCustomers.contactType" id="newCustomerOffline" value="offline">
                                        <label class="form-check-label" for="newCustomerOffline">线下</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-6">
                                    <label for="newCustomerProgress" class="form-label">进展和成果</label>
                                    <textarea class="form-control" id="newCustomerProgress" name="newCustomers.progress" rows="2"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label for="newCustomerNextStep" class="form-label">下一步计划</label>
                                    <textarea class="form-control" id="newCustomerNextStep" name="newCustomers.nextStep" rows="2"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 1.2 昨日客户活动 -->
                        <div class="mb-3">
                            <h6>1.2 昨日客户（已注册）活动</h6>
                            <div id="existingCustomersContainer">
                                <!-- 客户项目将通过JS动态添加 -->
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addExistingCustomer">
                                <i class="fas fa-plus"></i> 添加客户
                            </button>
                        </div>
                    </div>

                    <!-- 2. 区域销售进展 -->
                    <div class="form-section">
                        <h5>2. 区域销售进展</h5>

                        <!-- 2.1 昨日线上开新单 -->
                        <div class="mb-3">
                            <h6>2.1 昨日线上开新单</h6>
                            <div id="onlineOrdersContainer">
                                <!-- 线上订单客户将通过JS动态添加 -->
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="onlineOrderCount" class="form-label">线上开单客户数量</label>
                                    <input type="number" class="form-control" id="onlineOrderCount" name="sales.onlineOrderCount" min="0">
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addOnlineOrder">
                                <i class="fas fa-plus"></i> 添加客户
                            </button>
                        </div>

                        <!-- 2.2 昨日线下销售额 -->
                        <div class="mb-3">
                            <h6>2.2 昨日线下销售额</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="offlineAmount" class="form-label">线下销售额（元）</label>
                                    <input type="number" class="form-control" id="offlineAmount" name="sales.offlineAmount" min="0" step="0.01">
                                </div>
                                <div class="col-md-6">
                                    <label for="offlineRemark" class="form-label">备注</label>
                                    <textarea class="form-control" id="offlineRemark" name="sales.offlineRemark" rows="2"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 3. 区域自媒体推广 -->
                    <div class="form-section">
                        <h5>3. 区域自媒体推广</h5>

                        <!-- 3.1 昨日新发布内容 -->
                        <div class="mb-3">
                            <h6>3.1 昨日新发布内容</h6>
                            <div id="mediaContentsContainer">
                                <!-- 媒体内容将通过JS动态添加 -->
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addMediaContent">
                                <i class="fas fa-plus"></i> 添加内容
                            </button>
                        </div>

                        <!-- 3.2 昨日自媒体粉丝总数 -->
                        <div class="mb-3">
                            <h6>3.2 昨日自媒体粉丝总数</h6>
                            <div id="mediaFollowersContainer">
                                <!-- 粉丝数据将通过JS动态添加 -->
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addMediaFollower">
                                <i class="fas fa-plus"></i> 添加粉丝数据
                            </button>
                        </div>
                    </div>

                    <div class="d-grid gap-2 mt-4">
                        <button type="submit" class="btn btn-primary">提交复盘数据</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 客户选择模态框 -->
    <div class="modal fade" id="clientSelectModal" tabindex="-1" aria-labelledby="clientSelectModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="clientSelectModalLabel">选择客户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="clientSearchInput" placeholder="搜索客户...">
                    </div>
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-hover" id="clientsTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>电话</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each clients}}
                                <tr>
                                    <td>{{this.uid}}</td>
                                    <td>{{this.real_name}}</td>
                                    <td>{{this.phone}}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-primary select-client" 
                                                data-id="{{this.uid}}" 
                                                data-name="{{this.real_name}}">
                                            选择
                                        </button>
                                    </td>
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模板 -->
    <template id="existingCustomerTemplate">
        <div class="customer-item existing-customer">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6>客户信息</h6>
                <button type="button" class="btn btn-sm btn-outline-danger remove-item">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control client-display" placeholder="选择客户" readonly>
                        <input type="hidden" class="client-id" name="existingCustomers[INDEX].clientId">
                        <button type="button" class="btn btn-outline-secondary select-client-btn">选择</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="existingCustomers[INDEX].contactType" value="online" id="existingCustomerOnline_INDEX">
                        <label class="form-check-label" for="existingCustomerOnline_INDEX">线上</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="existingCustomers[INDEX].contactType" value="offline" id="existingCustomerOffline_INDEX">
                        <label class="form-check-label" for="existingCustomerOffline_INDEX">线下</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">进展和成果</label>
                    <textarea class="form-control" name="existingCustomers[INDEX].progress" rows="2"></textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">下一步计划</label>
                    <textarea class="form-control" name="existingCustomers[INDEX].nextStep" rows="2"></textarea>
                </div>
            </div>
        </div>
    </template>

    <template id="onlineOrderTemplate">
        <div class="customer-item online-order">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6>线上订单客户</h6>
                <button type="button" class="btn btn-sm btn-outline-danger remove-item">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control client-display" placeholder="选择客户" readonly>
                        <input type="hidden" class="client-id" name="sales.onlineOrders[INDEX].clientId">
                        <button type="button" class="btn btn-outline-secondary select-client-btn">选择</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">备注</label>
                    <textarea class="form-control" name="sales.onlineOrders[INDEX].remark" rows="1"></textarea>
                </div>
            </div>
        </div>
    </template>

    <template id="mediaContentTemplate">
        <div class="customer-item media-content">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6>自媒体内容</h6>
                <button type="button" class="btn btn-sm btn-outline-danger remove-item">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control client-display" placeholder="选择客户" readonly>
                        <input type="hidden" class="client-id" name="media.contents[INDEX].clientId">
                        <button type="button" class="btn btn-outline-secondary select-client-btn">选择</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">发布内容数量</label>
                    <input type="number" class="form-control" name="media.contents[INDEX].count" min="0">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label class="form-label">截图上传</label>
                    <input type="file" class="form-control media-image" accept="image/*">
                    <input type="hidden" class="media-image-url" name="media.contents[INDEX].imageUrl">
                    <div class="image-preview-container mt-2"></div>
                </div>
            </div>
        </div>
    </template>

    <template id="mediaFollowerTemplate">
        <div class="customer-item media-follower">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6>自媒体粉丝</h6>
                <button type="button" class="btn btn-sm btn-outline-danger remove-item">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control client-display" placeholder="选择客户" readonly>
                        <input type="hidden" class="client-id" name="media.followers[INDEX].clientId">
                        <button type="button" class="btn btn-outline-secondary select-client-btn">选择</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">粉丝总数</label>
                    <input type="number" class="form-control" name="media.followers[INDEX].count" min="0">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label class="form-label">截图上传</label>
                    <input type="file" class="form-control media-image" accept="image/*">
                    <input type="hidden" class="media-image-url" name="media.followers[INDEX].imageUrl">
                    <div class="image-preview-container mt-2"></div>
                </div>
            </div>
        </div>
    </template>

    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化变量
            let existingCustomerCount = 0;
            let onlineOrderCount = 0;
            let mediaContentCount = 0;
            let mediaFollowerCount = 0;
            let currentClientSelector = null;

            // 加载已有数据
            loadExistingReview();

            // 客户搜索功能
            document.getElementById('clientSearchInput').addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const rows = document.querySelectorAll('#clientsTable tbody tr');

                rows.forEach(row => {
                    const id = row.cells[0].textContent.toLowerCase();
                    const name = row.cells[1].textContent.toLowerCase();
                    const phone = row.cells[2].textContent.toLowerCase();

                    if (id.includes(searchTerm) || name.includes(searchTerm) || phone.includes(searchTerm)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });

            // 选择客户按钮点击事件
            document.querySelectorAll('.select-client').forEach(button => {
                button.addEventListener('click', function() {
                    const clientId = this.getAttribute('data-id');
                    const clientName = this.getAttribute('data-name');

                    if (currentClientSelector) {
                        const container = currentClientSelector.closest('.customer-item');
                        container.querySelector('.client-display').value = `${clientName} (ID: ${clientId})`;
                        container.querySelector('.client-id').value = clientId;

                        // 关闭模态框
                        const modal = bootstrap.Modal.getInstance(document.getElementById('clientSelectModal'));
                        modal.hide();
                    }
                });
            });

            // 添加已有客户
            document.getElementById('addExistingCustomer').addEventListener('click', function() {
                addExistingCustomer();
            });

            // 添加线上订单客户
            document.getElementById('addOnlineOrder').addEventListener('click', function() {
                addOnlineOrder();
            });

            // 添加媒体内容
            document.getElementById('addMediaContent').addEventListener('click', function() {
                addMediaContent();
            });

            // 添加媒体粉丝
            document.getElementById('addMediaFollower').addEventListener('click', function() {
                addMediaFollower();
            });

            // 表单提交
            document.getElementById('reviewForm').addEventListener('submit', function(e) {
                e.preventDefault();
                submitReviewForm();
            });

            // 加载已有复盘数据
            function loadExistingReview() {
                const reviewDate = document.getElementById('reviewDate').value;

                fetch(`/apps/crm/api/regional-reviews/${reviewDate}`)
                    .then(response => response.json())
                    .then(result => {
                        if (result.success) {
                            populateFormWithData(result.data);
                        }
                    })
                    .catch(error => {
                        console.error('加载复盘数据失败:', error);
                    });
            }
        });
    </script>
</body>
</html> 